<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: CSS Tweening Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../lib/tweenjs-NEXT.combined.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript" src="../src/tweenjs/plugins/CSSPlugin.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var colorSeed = 0;

	function init() {
		createjs.CSSPlugin.install();
		
		var count = 300;
		while (--count >= 0) {
			// create a new box:
			var box = document.createElement("div");
			box.style.width = "1%";
			box.style.height = "4%";
			box.style.position = "absolute";
			box.style.borderRadius = "2px";
			box.style.backgroundColor = "#0F0";
			box.style.opacity = 0;
			document.body.appendChild(box);
			
			// set up initial rotation & position:
			var a = (Math.random() * Math.PI * 2 * 16 | 0) / 16;
			box.style.transform = "translate(-50%,-50%) translate(50vw,50vh) rotate(" + a + "rad)";
			var d = 5;
			box.style.left = Math.cos(a) * d + "vh";
			box.style.top = Math.sin(a) * d + "vh";
			
			// calculate the target position:
			d = Math.random()*20+20;
			var x = Math.cos(a) * d;
			var y = Math.sin(a) * d;
			
			// create the tween:
			// CSSPlugin will use the value suffix it initially finds on the target's style.
			// So in this case, top/left use "vh", width/height use "%" and opacity has no suffix.
			createjs.Tween.get(box, {loop: -1}, true).wait(Math.random() * 2000| 0).to({opacity:1}).call(updateColor).to({top: y, left: x, width: 10, height: 0, opacity: 0.6}, Math.random() * 500 + 500, createjs.Ease.quadInOut);
		}
		
		// tween the base color that divs will be assigned when they start moving:
		createjs.Tween.get(this, {loop: -1}).to({colorSeed: 360}, 5000);
		
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
	}

	function updateColor(tween) {
		// grab the tween's target (the style object), and update it's color
		tween.target.style.backgroundColor = "hsl(" + (Math.random() * 60 + colorSeed | 0) + ",100%,50%)";
	}


</script>
</head>

<body onload="init();" style="background-color:#111111; overflow:hidden">

<header class="TweenJS">
	<h1>CSS Plugin Example</h1>

	<p>Shows the CSSPlugin in action.</p>
</header>

</body>
</html>
